<template>
  <div class="headline">
    <!-- <div class="title">
        <img src="http://imgcon.tea7.com/6363726507138286614601463.png" alt="">
    </div>
    <div class="content">
      <ul>
        <li v-for="item in lineList" :key="item.id">
            {{item.title}}
        </li>
      </ul>
    </div> -->
    <van-notice-bar left-icon="http://imgcon.tea7.com/6363726507138286614601463.png" :scrollable="false">
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item v-for="item in lineList" :key="item.list">{{item.title}}</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
  </div>
</template>

<script>
export default {
  props: ["lineList"],
};
</script>

<style lang="less" scoped>
.headline {
  display: flex;
  // justify-content: space-around;
  // align-items: center;
  padding: 0.75rem 0.5rem;
  height: 1.25rem;
  border-top: 1px solid #f3f3f3;
  background: #fff;
  .title {
    position: relative;
    border-right: 1px solid #f3f3f3;
    margin-right: 0.3125rem;
    img {
      height: 1.25rem;
      width: 4.6875rem;
      margin-right: 0.3125rem;
    }
  }
  .content {
    height: 100%;
    ul {
      height: 100%;
      overflow: hidden;
      li {
        line-height: 1.25rem;
      }
    }
  }
}
</style>